@keyframes bottomTopScale {
  0% {
    height: 0;
  }
  to {
    height: 100%;
  }
}

.cylinder-bar-chart {
  width: 100%;
  height: 100%;
  .chart-wrapper {
    width: calc(100% - 37px);
    height: 100%;
    position: relative;
    margin-left: 37px;
    .scale {
      position: absolute;
      left: -37px;
      top: -11px;
      height: calc(100% - 19px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 25px;
      span {
        color: #8b98a9;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
      }
    }

    .content {
      height: 100%;
      position: relative;

      .line-list {
        position: absolute;
        height: calc(100% - 38px);
        width: 100%;
        top: 0;
        left: 0;
        .line {
          width: 100%;
          position: absolute;
          z-index: 10;
          .dash {
            width: 100%;
            height: 1px;
            margin-top: -2px;
            &.green {
              background-image: linear-gradient(
                to right,
                rgba(83, 234, 178, 0.4) 0%,
                rgba(83, 234, 178, 0.4) 50%,
                transparent 50%
              );
              background-size: 9px 1px;
              background-repeat: repeat-x;
            }
            &.yellow {
              background-image: linear-gradient(
                to right,
                rgba(255, 100, 100, 0.4) 0%,
                rgba(255, 100, 100, 0.4) 50%,
                transparent 50%
              );
              background-size: 9px 1px;
              background-repeat: repeat-x;
            }
            &.default {
              background-image: linear-gradient(
                to right,
                rgb(236, 238, 241) 0%,
                rgb(236, 238, 241) 50%,
                transparent 50%
              );
              background-size: 9px 1px;
              background-repeat: repeat-x;
            }
            &.bottom {
              background-color: #dce0e6;
            }
          }

          &:hover {
            .dash {
              &.green {
                background-image: linear-gradient(
                  to right,
                  rgba(83, 234, 178, 1) 0%,
                  rgba(83, 234, 178, 1) 50%,
                  transparent 50%
                );
              }
              &.yellow {
                background-image: linear-gradient(
                  to right,
                  rgba(255, 100, 100, 1) 0%,
                  rgba(255, 100, 100, 1) 50%,
                  transparent 50%
                );
              }
            }
          }
        }
      }

      .bar-list {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        position: relative;
        height: 100%;
        .bar-item {
          height: 100%;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          z-index: 11;
          text-align: center;
          position: relative;
          .percent-wrapper {
            width: 100%;
            height: 100%;
            position: relative;
            transition: all 0.3s linear;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            .precent {
              position: absolute;
              left: 50%;
              bottom: 0px;
              transform: translateX(-50%);

              > div {
                position: absolute;
                width: 66px;
                text-align: center;
                top: -2%;
                height: 21px;
                margin-top: -21px;
              }
            }
            &:hover {
              background-color: rgba(220,224,230, 0.2);
            }
          }
          .title {
            margin-bottom: 0px;
            overflow: hidden;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            word-break: break-all;
            font-size: 12px;
            color: #a6b1bf;
            line-height: 14px;
            position: absolute;
            bottom: 18px;
          }
        }
      }
    }
  }
}

.ant-tooltip.cylinder-bar-chart-tooltip.ant-tooltip-placement-rightTop {
  .ant-tooltip-content {
    .ant-tooltip-inner {
      padding: 12px;
      font-size: 12px;
      color: #617185;
    }
  }
}

.ant-tooltip.cylinder-bar-line-chart-tooltip.ant-tooltip-placement-right  {
  .ant-tooltip-content {
    .ant-tooltip-inner {
      padding: 12px;
      font-size: 12px;
      color: #617185;
    }
  }
}